<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>三个J-家居网购</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" href="/assets/css/vendor/vendor.min.css"/>
    <link rel="stylesheet" href="/assets/css/plugins/plugins.min.css"/>
    <link rel="stylesheet" href="/assets/css/style.min.css"/>
</head>
<script type="text/javascript" src="/script/jquery-3.6.0.min.js">
</script>
<script type="text/javascript">
    $(function () {//页面加载完毕
        //
        $("#yonghuName").blur(function () {
            // alert("hihi")
            var username  =   this.value
            //发出ajax请求
            $.getJSON("/member/validateMember","yonghuName="+username,
                function (data) {
               console.log(data)

                    if (data.isExist){
                        $("span.registerMsg").text("用户名已经存在")
                    }else {
                        $("span.registerMsg").text("用户名可以使用")
                    }
                })
        })


        $('#captchaImg').on('click', function() {
            // 阻止图片默认的点击行为（如果有的话）
            event.preventDefault();

            // 更新图片的src属性，通常是通过在URL后面添加时间戳或随机数来避免浏览器缓存
            var timestamp = new Date().getTime(); // 获取当前时间戳
            this.src = '/member/createImageCode?' + timestamp; // 假设服务器支持通过查询参数避免缓存

        });
    //     绑定点击事件
        $("#sub-btn").click(function () {



            //获取到用户名
            var username = $("#yonghuName").val();

            //编写正则表达式验证
            var usernamePattern=/^[\w-]{6,10}$/;
            if (!usernamePattern.test(username)){
                //展示错误提示
                $("span[class='errorMsg']").text("用户名格式不对，需要6到10个字符")
                return false;//先不让提交
            }
            //完成密码的校验
            var passwordVal = $("#yonghuPassword").val();
            var passwordPattern=/^\w{6,10}$/;
            if (!passwordPattern.test(passwordVal)){
                $("span.errorMsg").text("密码格式错误")
                return  false;
            }
            //两次密码必须相同
            var repwd = $("#user-password").val();
            if (repwd!=passwordVal){
                $("span.errorMsg").text("两次密码不一样")
                return  false;
            }

           // 验证手机号
            var emailVal = $("#yonghuPhone").val();
            var emailValPattern=/^\d{11}$/;
            if (!emailValPattern.test(emailVal)){
                $("span.errorMsg").text("手机为数字11位请检查")
                return  false;
            }

            //验证性别
            var emailVal = $("#yonghuSex").val();
            var emailValPattern=/^(男|女)$/;
            if (!emailValPattern.test(emailVal)){
                $("span.errorMsg").text("性别为男或女")
                return  false;
            }

            var codeText = $("#code").val();
            codeText=$.trim(codeText);
            if (codeText==null||codeText==""){
                $("span.errorMsg").text("验证码不能为空")
                return false;
            }
            $("span.errorMsg").text("验证通过")
            //写了后台 当验证通过就要设置为true
            return  true;

        })

    })
</script>
<body>
<!-- Header Area start  -->
<div class="header section">
    <!-- Header Top Message Start -->
    <!-- Header Top  End -->
    <!-- Header Bottom  Start -->
    <div class="header-bottom d-none d-lg-block">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="/member/index"><img src="/assets/images/logo/logo.png" alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->

            </div>
        </div>
    </div>
    <!-- Header Bottom  Start 手机端的header -->
    <div class="header-bottom d-lg-none sticky-nav bg-white">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.html"><img width="280px" src="/assets/images/logo/logo.png" alt="Site Logo" /></a>
                    </div>
                </div>
                <!-- Header Logo End -->
            </div>
        </div>
    </div>
    <!-- Main Menu Start -->
    <div style="width: 100%;height: 50px;background-color: black"></div>
    <!-- Main Menu End -->
</div>
<!-- Header Area End  -->
<!-- login area start -->
<div class="login-register-area pt-70px pb-100px">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-12 ml-auto mr-auto">
                <div class="login-register-wrapper">
                    <div class="login-register-tab-list nav">
                        <a class="active" data-bs-toggle="tab" href="#lg1">
                            <h4>会员登录</h4>
                        </a>
                        <a data-bs-toggle="tab" href="#lg2">
                            <h4>会员注册</h4>
                        </a>
                    </div>
                    <div class="tab-content">
                        <div id="lg1" class="tab-pane active">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                        <span th:text="${session.errorMsg}" style="font-size: 18pt;font-weight: bold;float: right;color: gainsboro">
                                    </span>
                                    <form action="/member/loginuser" method="post">
                                        <input type="text" name="user-name" placeholder="Username"/>
                                        <input type="password" name="user-password" placeholder="Password"/>
                                        <div class="button-box">
                                            <div class="login-toggle-btn">
                                                <input type="checkbox"/>
                                                <a class="flote-none" href="javascript:void(0)">Remember me</a>
                                                <a href="#">Forgot Password?</a>
                                            </div>
                                            <button type="submit"><span>Login</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div id="lg2" class="tab-pane">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <span class="registerMsg" style="float: right; font-weight: bold; font-size: 20pt; margin-left: 10px;">

                                    </span>
                                    <span class="errorMsg"
                                          style="float: right; font-weight: bold; font-size: 20pt; margin-left: 10px;"></span>
                                    <form action="/member/register" method="post">
                                        <input type="text"  id="yonghuName" name="yonghuName" placeholder="Username"/>
                                        <input type="password"  id="yonghuPassword" name="yonghuPassword" placeholder="输入密码"/>
                                        <input type="password" id="user-password" name="user-password" placeholder="确认密码"/>
                                        <input type="text" id="yonghuPhone" name="yonghuPhone" placeholder="手机号"/>
                                        <input type="text" id="yonghuSex" name="yonghuSex" placeholder="性别"/>
                                        <input type="text"  name="code" style="width: 50%" id="code"
                                               placeholder="验证码"/>　　<img alt="" id="captchaImg" src="/member/createImageCode">
                                        <div class="button-box">
                                            <button id="sub-btn" type="submit" ><span>会员注册</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- login area end -->

<!-- Footer Area Start -->
<div class="footer-area">
    <div class="footer-container">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <!-- Start single blog -->
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-sm-6 col-lg-3 mb-md-30px mb-lm-30px" data-aos="fade-up"
                         data-aos-delay="400">
                        <div class="single-wedge">
                            <h4 class="footer-herading">信息</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="about.html">关于我们</a></li>
                                        <li class="li"><a class="single-link" href="#">交货信息</a></li>
                                        <li class="li"><a class="single-link" href="privacy-policy.html">隐私与政策</a></li>
                                        <li class="li"><a class="single-link" href="#">条款和条件</a></li>
                                        <li class="li"><a class="single-link" href="#">制造</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-2 col-sm-6 mb-lm-30px" data-aos="fade-up" data-aos-delay="600">
                        <div class="single-wedge">
                            <h4 class="footer-herading">我的账号</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="my-account.html">我的账号</a>
                                        </li>
                                        <li class="li"><a class="single-link" href="cart.html">我的购物车</a></li>
                                        <li class="li"><a class="single-link" href="login.html">登录</a></li>
                                        <li class="li"><a class="single-link" href="wishlist.html">感兴趣的</a></li>
                                        <li class="li"><a class="single-link" href="checkout.html">结账</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="800">

                    </div>
                    <!-- End single blog -->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row flex-sm-row-reverse">
                    <div class="col-md-6 text-right">
                        <div class="payment-link">
                            <img src="#" alt="">
                        </div>
                    </div>
                    <div class="col-md-6 text-left">
                        <p class="copy-text">Copyright &copy; 三个J~</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer Area End -->
<script src="/assets/js/vendor/vendor.min.js"></script>
<script src="/assets/js/plugins/plugins.min.js"></script>
<!-- Main Js -->
<script src="/assets/js/main.js"></script>
</body>
</html>